<template>
  <section class="sample-section"  v-loading.lock="loading" element-loading-text="拼命加载中">
    <el-page-header @back="goBack" :content="title"></el-page-header>

    <el-card class="box-card">
      <el-row class="group">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="group-item">
            <div class="name">企业名称</div>
            <div class="value">{{headData.company_title}}</div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="group-item">
            <div class="name">数据条数</div>
            <div class="value">{{headData.import_num}}（条）</div>
          </div>
        </el-col>
      </el-row>
      <el-row class="group">
        <el-col :sm="16" :xs="24">
          <div class="group-item" :class="headData.error.length > 0 ? 'error' : ''">
            <div class="name">错误信息</div>
            <div class="value">{{headData.error[0]}}
              <el-popover
                placement="bottom"
                title="错误信息"
                trigger="hover">
                <div>
                  <p v-for="(error, index) in headData.error" :key="index">{{index + 1}}. {{error}}</p>
                </div>
                <span slot="reference" v-show="headData.error.length > 1"><i class="more el-icon-d-arrow-right"></i></span>
              </el-popover>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table :data="listData"
                ref="table"
                :row-class-name="handleRowClassName"
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column align="center" prop="user_name" label="手机号"></el-table-column>
        <el-table-column align="center" prop="name" label="身份证姓名"></el-table-column>
        <el-table-column align="center" prop="id_card_number" label="身份证号"></el-table-column>
        <el-table-column align="center" prop="bank_number" label="银行账号"></el-table-column>
        <el-table-column align="center" prop="alipay_account" label="支付宝账号"></el-table-column>
        <el-table-column align="center" prop="" label="错误信息">
          <template slot-scope="scope">
            <div class="error" v-for="(item, index) in scope.row.error_list" :key="index">{{(index + 1) + '. ' + item}}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="buttons" v-if="isPass == false">
      <el-button @click="goBack()" type="danger">重新导入</el-button>
    </div>
    <div class="buttons" v-else>
      <el-button @click="doSubmit()" type="primary">确认提交</el-button>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'validate',
    props: {
      headData: {
        type: Object,
        default: {}
      },
      tableData: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        loading: false,
        title: '核对导入注册明细',
        isPass: false,
        listData: [],
        success: 0,
        error: 0
      }
    },
    mounted() {
      this.listData = this.tableData
      if(!this.headData.error_status) {
        this.title = '确认导入注册明细'
        this.isPass = true
      }
    },
    methods: {
      handleSelectionChange(val) {
      },
      handleRowClassName({row, rowIndex}) {
        if (row.repeat) {
          return 'is-repeat'
        }
        if (row.error_list && row.error_list.length > 0) {
          return 'is-error'
        }
      },
      goBack() {
        this.$emit('cancel', true)
      },
      doSubmit() {
        let _size = 30
        let _data = this.chunk(this.listData, _size);
        let total_count = this.listData.length
        let _count = _data.length
        if(_count < _size) {
          _size = _count
        }
        const loading = this.$loading({
          lock: true,
          text: '数据导入中('+ _size +' / '+ total_count +')',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.request(_data, 0, loading, total_count)
      },
      request(_data, idx, loading, total_count) {
        let _self = this
        this.$http({
          url: this.$http.adornUrl('/member/create'),
          method: 'post',
          timeout: 60 * 1000,
          data: this.$http.adornData({
            'company_id':this.headData.company_id,
            'list': _data[idx]
          })
        }).then((res) => {
          if(res.data.code === 0) {
            _self.success = res.data.data.success
            _self.error = res.data.data.error
            if(idx + 1 >= _data.length) {
              loading.close()
              this.$message({
                message: '导入完成,导入成功'+_self.success+'条,导入失败'+_self.error+'条',
                type: 'warning',
                duration: 5000
              });
              _self.$parent.$parent.$parent.$parent.$parent.tabsCloseCurrentHandle()
              _self.$router.push({ name: 'member-list'})
            } else {
              let now_count = (idx + 1) * 30
              if(now_count > total_count) {
                now_count = total_count
              }
              loading.text = '数据导入中('+ now_count  +' / '+ total_count +')'
              this.request(_data, idx+1, loading, total_count)
            }
          } else {
            loading.close()
            this.$message.error(res.data.msg)
          }
        }).catch((err) => {
          console.log(err)
          loading.close()
          //this.$message.error('请求错误')
        })
      },
      chunk(arr, size) {
        let objArr = new Array();
        let index = 0;
        let objArrLen = arr.length/size;
        for(let i=0;i<objArrLen;i++){
          let arrTemp = new Array();
          for(let j=0;j<size;j++){
            arrTemp[j] = arr[index++];
            if(index==arr.length){
              break;
            }
          }
          objArr[i] = arrTemp;
        }
        return objArr;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box-card {
    margin: 20px 0;
    .group {
      border: 1px solid #eee;
      .group-item {
        display: flex;
        height: 36px;
        line-height: 36px;
        text-align: center;
        &.error {
          .value {
            background: #FFEB3B;
            color: #F56C6C;
            text-align: left;
            overflow: hidden;
            padding: 0 20px;
            position: relative;
            .more {
              line-height: 36px;
              color: #F56C6C;
            }
          }
        }
        .name {
          width: 120px;
          background: #e5e9f2;
        }
        .value {
          flex: 1;
        }
      }
    }

    /deep/.is-repeat {
      .cell {
        color: #f56c6c;
      }
    }

    /deep/ .is-error {
      .error {
        color: #f56c6c;
      }
    }
  }

  .buttons {
    margin-top: 15px;
    text-align: center;
    .el-button {
      width: 100px;
    }
  }
</style>
